<template>
  <div>
    <!--<el-menu-item class="el-menu-demo"  index="5">-->
    <!--<el-menu class="el-menu-demo" mode="horizontal">-->


    <!--</el-menu>-->


    <!--</el-menu-item>-->

    <router-view/>


    <el-menu class="el-menu-demo" mode="horizontal" v-if="this.$store.state.token">

      <el-menu-item index="1" class="pull-right" @click="logout">
        <p>注销</p>
      </el-menu-item>
      <el-menu-item index="2" class="pull-right">
        <p>{{this.$store.state.nickname}}</p>
      </el-menu-item>
      <el-submenu index="3" class="pull-right el-menu-demo">
        <template slot="title">RSS</template>
        <el-menu-item index="3-1"><i class="fa fa-rss" aria-hidden="true"></i> <a
          :href="$store.state.ip + 'feed/'">电影</a></el-menu-item>
      </el-submenu>
      <el-menu-item index="3" class="pull-right el-menu-demo">
        <router-link to="/movieinfo" tag="span">电影</router-link>
      </el-menu-item>
      <el-menu-item index="4" class="pull-right el-menu-demo">
        <router-link to="/" tag="span">资源分享</router-link>
      </el-menu-item>
    </el-menu>
    <el-menu class="el-menu-demo" mode="horizontal" v-else>

      <el-menu-item index="1" class="pull-right">
        <el-button type="text" @click="loginDialog = true">登入</el-button>
      </el-menu-item>

      <el-menu-item index="2" class="pull-right">
        <el-button type="text" @click="registeredDialog = true">Join US</el-button>
      </el-menu-item>
      <el-submenu index="3" class="pull-right el-menu-demo">
        <template slot="title">RSS</template>
        <el-menu-item index="3-1"><i class="fa fa-rss" aria-hidden="true"></i>
          <a href="http://share.youcd.me/movieinfo/feed/">电影</a>
        </el-menu-item>
      </el-submenu>
      <el-menu-item index="4" class="pull-right el-menu-demo">
        <router-link to="/movieinfo" tag="span">电影</router-link>
      </el-menu-item>

      <el-menu-item index="5" class="pull-right el-menu-demo">
        <router-link to="/" tag="span">资源分享</router-link>
      </el-menu-item>
    </el-menu>
    <el-dialog
      title="登入"
      :visible.sync="loginDialog" center width="30%">

      <div class="form-group">
        <label for="user">用户名</label>
        <input type="text" class="form-control" id="user" placeholder="请输入账户" v-model="user" v-focus>
      </div>
      <div class="form-group">
        <label for="password">密&nbsp码</label>&nbsp&nbsp
        <input type="password" class="form-control" id="password" placeholder="请输入密码" v-model="password"
               @keyup.enter="login">
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="loginDialog = false">取消</el-button>
        <el-button type="primary" @click="login">起飞</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="注册"
      :visible.sync="registeredDialog" center>

      <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="user">
          <el-input type="text" v-model="ruleForm2.user" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nikname">
          <el-input type="text" v-model="ruleForm2.nikname" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          prop="email"
          label="邮箱"
          :rules="[
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ]"
        >
          <el-input v-model="ruleForm2.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm('ruleForm2')">重置</el-button>
          <el-button type="primary" @click="submitForm('ruleForm2')" class="pull-right">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


  </div>
</template>

<script>
  export default {
    name: "Vlogin",
    data() {

      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm2.checkPass !== '') {
            this.$refs.ruleForm2.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm2.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        loginDialog: false,
        registeredDialog: false,
        dataList: [],
        tagList: [],
        user: "",
        password: "",
        nickname: "",


        ruleForm2: {
          pass: '',
          checkPass: '',
          user: "",
          nikname: "",
          email: "",


        },
        rules2: {
          pass: [
            {validator: validatePass, trigger: 'blur'}
          ],
          checkPass: [
            {validator: validatePass2, trigger: 'blur'}
          ],

        },
      };

    },
    mounted() {
    },
    methods: {
      login: function () {
        // console.log(this.user,this.password)
        this.$axios.request({
          url: this.$store.state.ip + "login/",
          method: "POST",
          data: {
            user: this.user,
            password: this.password
          },
          headers: {
            "Content-Type": "application/json"
          }
        }).then((responseData) => {

          this.user = this.password = null
          // console.log(responseData.data)
          if (responseData.data.code === 1000) {
            // console.log(this.$store.state.user)
            // this.$store.state.nickname=responseData.data.nickname
            // this.$store.state.token=responseData.data.token
            // 调用 store.js 中的 commit 方法将nickname  token 写入浏览器 cookie 中
            this.$store.commit("saveToken", {
              token: responseData.data.token,
              nickname: responseData.data.nickname,
              user_id: responseData.data.user_id,
            })
            this.loginDialog = false
          } else {
            alert(responseData.data.error)
          }
          location.reload();

        }).catch(function (error) {
          alert("发生错误")
        })
      },
      logout: function () {
        this.$store.commit("clearToken")
        // this.user=null
        // this.password=null

      },

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.request({
              url: this.$store.state.ip + "registered/",
              method: "POST",
              data: {
                user: this.ruleForm2.user,
                password: this.ruleForm2.pass,
                nickname: this.ruleForm2.nikname,
                email: this.ruleForm2.email,
              }
            }).then(function (responseData) {
              alert(responseData.data.msg)
              location.reload()
            }).catch(function (error) {
              alert("添加失败")
            })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      getRoutePath() {
        console.log(this.$route.path)

      },
    },


  }
</script>

<style scoped>

</style>
